<template>
  <el-dialog class="Choice-dlg" title="信息" width="65%" :visible.sync="innerVisible">
    <el-form ref="ChoiceForm" :model="ChoiceRecord" :rules="ChoiceRules"
    label-position="right" label-width="105px" size="mini" status-icon>
      <el-row>
        <el-col style="height:100%;">
          <table-panel :name="'耗材信息'" 
          :columns="Choice2Columns" 
          :tableData="Choice2Data" 
          :showRowNumber="false" 
          :multiSelection="true"
          :inputLabelSearchMode="true"
          :currentPage="Choice2CurrentPage" 
          :totalNum="Choice2TotalNum" 
          @page-change="onPageChange2('Choice2',$event)" 
          :pageSize="pageSize2"
          @table-searching="onSearching2('Choice2',$event)"
          @selection-change="onSelectionChange2('Choice2',$event)">
          </table-panel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数量" prop="number">
            <el-input type="number" :rows="1" v-model="ChoiceRecord.number"></el-input>
          </el-form-item>
          <el-form-item label="持续月份" prop="categoryName">
            <el-input type="number" :rows="1" v-model="ChoiceRecord.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="总金额" prop="totalMoney">
            <el-input type="number" :rows="1" v-model="ChoiceRecord.totalMoney" :change="(ChoiceRecord.monthlyMoney = ChoiceRecord.totalMoney / ChoiceRecord.categoryName)"><template slot="append">￥</template></el-input>
          </el-form-item>
          <el-form-item label="均分月金额" prop="monthlyMoney">
            <el-input type="number" :rows="1" v-model="ChoiceRecord.monthlyMoney" :readonly="true"><template slot="append">￥</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
                <el-form-item label="有效否" prop="validity">
                  <el-switch
                    v-model="ChoiceRecord.validity"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item label="备注" prop="notes">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5}"
                    placeholder="请输入内容"
                    maxlength="50"
                    show-word-limit
                    v-model="ChoiceRecord.notes">
                  </el-input>
                </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button @click="onConfirm" type="primary" size="mini">确定</el-button>
        <el-button @click="innerVisible=false" size="mini">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>   
</template>
<script>

import TablePanel from "@/components/basic/TablePanel";//一个简单的增删查改表格
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";//从表格列变换到表单的一些工具

//meta info
var Choice2 = "Choice2"; // 表格名称
var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// -列
var Choice2Columns = [
  {
    prop: "medicalConsumableId",
    label: "编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "medicalConsumableDefinedId",
    label: "自定编号",
    width:80,
  },
  {
    prop: "medicalConsumableName",
    label: "耗材名称",
    width:150,
  },
  {
    prop: "specifications",
    label: "规格型号",
  },
  {
    prop: "price",
    label: "单价",
    outOfSearch:true,
  },
  {
    prop: "unit",
    label: "单位",
    outOfSearch:true,
    width:60,
  },
  {
    prop: "productionPlace",
    label: "生产厂家",
    width:170,
  },
  {
    prop: "number",
    label: "数量",
    outOfSearch:true,
  },
  {
    prop: "categoryName",
    label: "持续月份",
    outOfSearch:true,
  },
  {
    prop: "totalMoney",
    label: "总金额",
    outOfSearch:true,
  },
  {
    prop: "monthlyMoney",
    label: "均分月金额",
    outOfSearch:true,
  },
];

export default {
  name:"ChoiceDlg",
  components: {
    "table-panel": TablePanel,
  },
  props:{
    ChoiceRecord:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    ChoiceRules:{
      type:Object,
      default:()=>{
        return {};
      }
    },
  ChoiceDlgVisible:{
      type:Boolean,
      default:false
    },
    hasResetBtn:{
      type:Boolean,
      default:false
    }
  },
  watch:{
   ChoiceDlgVisible: function (val, oldVal) {
      this.innerVisible = val;
    },
    innerVisible:function(val, oldVal){
      if(!val){
        this.$emit('close');
      }
    }
  },
  methods:{
    onSearching2: function(tname, params) {//查询
      var me = this;
      let url = "/static/data/Consumables.json";// /jcJsxxb   /static/data/EquipmentConsumables.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              me[tname+totalNumAttr] = resp.data.total;// 分页-总数
              this.pageSize2 = resp.data.limit;//每页数量
              me[tname+curPageAttr] = resp.data.offset;//起始页
            }
        });
      }
    },
    onSelectionChange2: function(tname, data) {// 选中改变
      var me = this;
      // 缓存记录，按照编号，查询对应的选中权限节点数组
      me[tname + selectionAttr] = data;
    },
    onPageChange2:function(tname,page){// 分页改变
      var me = this;
      let url = "/jcJsxxb";// /jcJsxxb

      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              //me[tname+dataAttr] = resp.data.results;
              //me[tname+totalNumAttr] = resp.data.total;
              me[tname+dataAttr] = resp.data.data;
              me[tname+totalNumAttr] = resp.data.data.length;
            }
        });
      }

    },
    onConfirm:function(){
      let me = this;
      // 验证信息
      let ret;
      me.$refs.ChoiceForm.validate((result, what) => {
        ret = result;
      });
      if (!ret) {
        me.$message.error("表单信息有误");
        return;
      }else{
        me.$emit('confirm');
      }

    },
  },
  data(){
    return {
      innerVisible:false,
      authorities:{
        search:true,
      },// 权限控制
      [Choice2 + columnsAttr]: Choice2Columns, // 表格-列
      [Choice2 + dataAttr]: [], // 表格的数据
      [Choice2 + selectionAttr]: [], // 当前选中
      [Choice2 + dlgVisibleAttr]: false, // 对话框是否可见
      [Choice2 + recordAttr]: {}, // 表单模型
      [Choice2 + rulesAttr]: {},// 表单验证
      [Choice2 + curPageAttr]:1,// 当前页
      [Choice2 + totalNumAttr]:0,// 总数
      [Choice2 + qParamAttr]:{},// 查询参数
      pageSize2:20,// 每页数量
    };
  },
  created: function() {
    var me = this;
    // 表单模型初始化
    me[Choice2 + recordAttr] = formModelInitFromTable(me[Choice2 + columnsAttr]);
    // 表单验证初始化
    me[Choice2 + rulesAttr] = formRulesInitFromTable(me[Choice2 + columnsAttr]);

    
    me.onSearching2(Choice2, {});// 重新查一遍
  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";
.Choice-dlg{
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: $--color-primary;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 134px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 134px;
    height: 178px;
    display: block;
  }
  .module-basic-VideoSection {
  height: 100%;
}
}
</style>
